import React from 'react'
import WHeadDom from '@components/global/head-dom'
import Link from 'next/link'

interface PropsInterface {
  statusCode: number
}

export default class Error extends React.Component<PropsInterface> {
  static getInitialProps({ res, err }: { res: any, err: any }) {
    const statusCode = res ? res.statusCode : err ? err.statusCode : null;
    return { statusCode }
  }

  render() {
    // 错误状态码
    const code = this.props.statusCode || 404

    return (
      <div className="error-page">
        <WHeadDom title={`${code}`} />
        <span className="error-code">{code}</span>
        <Link href="/">
          <a className="home-link">跳转主页</a>
        </Link>
        <style jsx>{`
          .error-page {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
          }
          .error-code {
            font-size: 50px;
            color: #aaa;
          }
          .home-link {
            font-size: 20px;
            color: #999;
          }
        `}</style>
      </div>
    )
  }
}